<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加</title>

    <script src='https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js'></script>

</head>

<body>


    <div class="add-top">
        <img src="../img/关闭.png" alt="" id="exitAdd">
        <h3>动态</h3>
        <button id="publishBtn">发表</button>
    </div>

    <main>
        <textarea class="weui-textarea" placeholder="这一刻的想法..." rows="3"></textarea>



        <!-- 图片 -->
        <div class="upload-pictures" style="display: flex; flex-wrap: wrap;">
            <div role="dialog" aria-hidden="true" aria-modal="true" class="weui-gallery" id="gallery">
                <span role="img" tabindex="0" class="weui-gallery__img" id="galleryImg"></span>
                <div class="weui-gallery__opr">
                    <a role="button" aria-label="删除" href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
            </div>
            <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" role="img" aria-label="图片标题" title="轻点两下查看大图" tabindex="0"></li>
            </ul>
            <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
            </div>
        </div>






        <!-- 分隔线 -->
        <div style="border-top: 1px solid #bbb; margin: 15px 0;"></div>
        <!-- 所在地址 -->
        <a aria-labelledby="t1 t2" class="weui-cell weui-cell_active weui-cell_access weui-cell_example" href="javascript:" style="padding: 0;">
            <div aria-hidden="true" id="t1" class="weui-cell__hd" style="color: #8a8a8a;"><span class="iconfont icon-weizhi"></span>&nbsp;</div>
            <div aria-hidden="true" id="t2" class="weui-cell__bd weui-cell_primary">
                <p>所在地址</p>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <!-- 分隔线 -->
        <div style="border-top: 1px solid #bbb; margin: 15px 0"></div>
        <!-- 是否隐藏 -->
        <label for="cb" class="weui-cell weui-cell_active weui-cell_switch" style="padding: 0;">
            <div class="weui-cell__bd" id="cb_txt" aria-hidden="true"><span class="iconfont icon-kanjian4" style="color: #8a8a8a; font-size: 16px;"></span>&nbsp;是否公开</div>
            <div class="weui-cell__ft">
                <input aria-labelledby="cb_txt" id="cb" class="weui-switch" type="checkbox" checked/>
            </div>
        </label>

    </main>




    <script type="text/javascript">
        var tmpl = '<li class="weui-uploader__file" role="img" tabindex="0" style="background-image:url(#url#)"></li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function(e) {
            var src, url = window.URL || window.webkitURL || window.mozURL,
                files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];

                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }


                $uploaderFiles.append($(tmpl.replace('#url#', src)));
            }
        });
        var currentImg;
        $uploaderFiles.on("click", "li", function() {
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.attr('aria-hidden', 'false');
            $gallery.attr('aria-modal', 'true');
            $gallery.fadeIn(100);
            setTimeout(function() {
                $galleryImg.attr("tabindex", '-1').trigger('focus');
            }, 200);
            currentImg = this;
        });
        $gallery.on("click", function() {
            $gallery.attr('aria-modal', 'false');
            $gallery.attr('aria-hidden', 'true');
            $gallery.fadeOut(100);
            setTimeout(function() {
                $galleryImg.removeAttr("tabindex");
            }, 200);
            currentImg.focus();
        });
    </script>

</body>

</html>